<template>
  <div>
    <div class="operator">
      <n-button type="primary" @click="addDepartment">添加部门</n-button>
    </div>
    <n-data-table :loading="tableLoading" :columns="columns" :data="data" :pagination="pagination"
      :single-line="false" />
    <n-modal :style="{ width: '500px', height: '300px' }" v-model:show="showModal" class="custom-card" preset="card"
      :title="update ? '修改部门' : '添加部门'" size="huge" :bordered="false" :segmented="segmented">
      <template #header-extra>
      </template>
      <n-flex>
        <n-form :model="form" label-placement="left" label-width="auto" :style="{ width: '100%' }">
          <n-form-item label="部门编号">
            <n-input v-model:value="form.number" placeholder="请输入部门编号" />
          </n-form-item>
          <n-form-item label="部门名称">
            <n-input v-model:value="form.name" placeholder="请输入部门名称" />
          </n-form-item>
        </n-form>
      </n-flex>
      <template #footer>
        <n-flex justify="end">
          <n-button @click="showModal = false">取消</n-button>
          <n-button :loading="submitLoading" type="primary"
            @click="update ? updateDepartment() : addDepartmentSubmit()">确定</n-button>
        </n-flex>
      </template>
    </n-modal>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { addDepartment as increaseDept, getDepartment, delDepartment, updateDepartment as updateDept } from "@/api"
import { NButton, NPopconfirm } from "naive-ui"
const showModal = ref(false)
const segmented = ref(false)
const submitLoading = ref(false)
const tableLoading = ref(false)
const update = ref(false)
const form = ref({})
const columns = [
  {
    title: '部门编号',
    key: 'number'
  },
  {
    title: '部门名称',
    key: 'name'
  },
  {
    title: '操作',
    key: 'jurisdiction',
    width: 150,
    render(item) {
      return [
        h(NButton,
          {
            type: "info",
            quaternary: true,
            size: 'small',
            onClick: () => {
              console.log(item)
              update.value = true
              form.value = {
                number: item.number,
                name: item.name,
                _id: item._id
              }
              showModal.value = true
            },
          },
          { default: () => "修改" }
        ),
        h(NPopconfirm,
          {
            onPositiveClick: () => {
              console.log(item);
              delDepartment({ _id: item._id }).then(res => {
                if (res.code != 200) return $message.error(res.message)
                $message.success(res.message)
                getList()
              })
              // deleteInvoice([item])
            },
          },
          {
            trigger: () => h(NButton,
              {
                type: "error",
                quaternary: true,
                size: 'small',
              },
              { default: () => "删除" }
            ), default: () => "确认删除"
          },

        ),
      ]
    }
  },
]
const data = ref([])
const pagination = {
  showSizePicker: true,
  pageSizes: [10, 30, 50, 100],//可切换的 每页条数
};
function addDepartment(params) {
  showModal.value = true
  update.value = false
  form.value = {}
}
function updateDepartment() {
  const query = JSON.parse(JSON.stringify(form.value))
  // console.log(query);
  if (!query.number) return $message.warning("请填写部门编号！")
  if (!query.name) return $message.warning("请填写部门名称！")
  submitLoading.value = true
  updateDept(query).then(res => {
    submitLoading.value = false
    if (res.code != 200) return $message.error(res.message)
    $message.success(res.message)
    showModal.value = false
    getList()
  })
}
function addDepartmentSubmit() {
  const query = JSON.parse(JSON.stringify(form.value))
  if (!query.number) return $message.warning("请填写部门编号！")
  if (!query.name) return $message.warning("请填写部门名称！")
  // console.log(query);
  submitLoading.value = true
  increaseDept(query).then(res => {
    submitLoading.value = false
    if (res.code != 200) return $message.error(res.message)
    $message.success(res.message)
    showModal.value = false
    getList()
  })
}
getList()
function getList() {
  form.value = {}
  tableLoading.value = true
  getDepartment().then(res => {
    tableLoading.value = false
    if (res.code != 200) return $message.error(res.message)
    data.value = res.data
  })
}
</script>

<style lang="less" scoped>
.operator {
  margin-bottom: 20px;
}
</style>